<template>
  <div class="user-edit">
    <Drawer :title="title" v-model="visible" width="600" :mask-closable="false">
      <Form ref="supplierForm" :model="data" :label-width="130" :rules="supplierFormValidate">
        <FormItem label="服务供应商类别" prop="type" class="margin-bottom-3">
          <Select v-model="data.type">
            <Option v-for="item in companyType" :key="item.id" :value="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="服务供应商名称" prop="company" class="margin-bottom-3">
          <Input v-model="data.company" placeholder="服务供应商公司全称" />
        </FormItem>
        <FormItem label="公司地址" prop="address" class="margin-bottom-3">
          <Input v-model="data.address" />
        </FormItem>
        <FormItem label="企业机构代码" prop="credit_code" class="margin-bottom-3">
          <Input v-model="data.credit_code" />
        </FormItem>
        <FormItem label="企业法人" prop="legal" class="margin-bottom-3">
          <Input v-model="data.legal" />
        </FormItem>
        <FormItem label="联系人" prop="contacts" class="margin-bottom-3">
          <Input v-model="data.contacts" />
        </FormItem>
        <FormItem label="电话" prop="mobile" class="margin-bottom-3">
          <Input v-model="data.mobile" />
        </FormItem>
        <FormItem label="传真" prop="fax" class="margin-bottom-3">
          <Input v-model="data.fax" />
        </FormItem>
        <FormItem label="额度上限" prop="upper_limit" class="margin-bottom-3">
          <Input v-model="data.upper_limit" />
        </FormItem>
        <FormItem label="电子邮箱" prop="email" class="margin-bottom-3">
          <Input v-model="data.email" />
        </FormItem>
      </Form>
      <bankAccount :accountData="accountData" :company="company" v-show="type == '2'"/>
      <div class="demo-drawer-footer">
        <Button @click="handleCancel" style="margin-right: 36px;">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="submit">确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { getCompanyType, getBankAccount, checkCompany, insertSupplier, updateSupplier } from '@/api/company';
// import { checkName, insertFacilitator, updateFacilitator, getBankAccount } from '@/api/company';
import bankAccount from '../bankAccount';
export default {
  name: 'add-edit-supplier',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
    type: {
      /**
       * '2': 编辑项目
       * '1': 添加项目
       */
      type: String,
      default: "0"
    }
  },
  components: {
    bankAccount
  },
  data() {
    return {
      visible: this.value,
      title: '',
      height: 540,
      submitLoading: false,
      accountData: [],
      company: {},
      companyType: [],
      addAccountVisiable: false,
      supplierFormValidate: {
        company: [
          {required: true, message: "服务供应商名称不能为空", trigger: "blur"}
        ],
        address: [
          {required: true, message: "服务供应商地址不能为空", trigger: "blur"}
        ],
        credit_code: [
          {required: true, message: "企业机构代码不能为空", trigger: "blur"}
        ],
        contacts: [
          {required: true, message: "联系人不能为空", trigger: "blur"}
        ],
        mobile: [
          {required: true, message: "联系人电话不能为空", trigger: "blur"}
        ]
      }
    }
  },
  methods: {
    getAccount() {
      let params = {
        company_type: 2,
        company_id: this.data.id
      }
      getBankAccount(params).then(res => {
        if (res.code === 0) {
          this.accountData = res.data;
        }
      })
    },
    getCompanyTypeList() {
      getCompanyType({type: 9}).then(res => {
        console.log(res);
        if (res.code === 0) {
          this.companyType = res.data;
        }
      })
    },
    init() {
      this.getCompanyTypeList();
      switch(this.type) {
        case '1':
          this.title = '新增服务供应商';
          break;
        case '2':
          this.title = '编辑服务供应商';
          this.company = {
            company_type: 2,
            company_id: this.data.id
          }
          this.getAccount();
          break;
      }
    },
    handleCancel() {
      this.visible = false;
    },
    submit() {
      console.log(typeof this.type)
      switch(this.type) {
        case '1':
          this.$refs.supplierForm.validate(valid => {
            if (valid) {
              this.data.company = this.data.company.trim();
              this.data.address = this.data.address.trim();
              this.data.credit_code = this.data.credit_code.trim();
              this.submitLoading = true;
              const params = {company: this.data.company};
              checkCompany(params).then(res => {
                if (res.code === 0) {
                  insertSupplier(this.data).then(res => {
                    if (res.code === 0) {
                      this.$Message.success(res.message);
                    }
                    this.submitLoading = false;
                    this.$emit("on-submit", true);
                    this.visible = false;
                  })
                } else {
                  this.$Message.error(res.message);
                  this.submitLoading = false;
                  return;
                }
              })
              this.submitLoading = false;
            }
          })
          break;
        case '2':
          this.$refs.supplierForm.validate(valid => {
            if (valid) {
              this.submitLoading = true;
              console.log('this.data:',this.data);
              let params = this.data;
              delete params.company;
              updateSupplier(params).then(res => {
                if (res.code === 0) {
                  this.$Message.success(res.message);
                }
                this.submitLoading = false;
                this.$emit("on-submit", true);
                this.visible = false;
              })
            }
          })
          break;
      }
    },

    setCurrentValue(value) {
      this.visible = value;
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.init();
      this.$emit("input", value);
    }
  },
  mounted() {
    this.height = Number(document.documentElement.clientHeight - 100);
  }
}
</script>
<style lang="less" scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
table.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  color: #777777;
  border-width: 1px;
  border-color: #777777;
  border-collapse: collapse;
}

table.gridtable th {
  border-width: 1px;
  padding: 6px;
  border-style: solid;
  border-color: #aaaaaa;
  background-color: #dedede;
}

table.gridtable td {
  border-width: 1px;
  padding: 4px;
  border-style: solid;
  border-color: #8b8b8b;
  background-color: #ffffff;
}
</style>